<template>
  <div class="page-box">
    <!-- 工具条区域 -->
    <div class="tabbar-box">
      <el-row type="flex" justify="space-between">
        <div v-show="flag" class="search-box">
          <!-- :inline="true" 表单在一行显示 -->
          <el-form size="mini" :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input
                v-model="queryData.username"
                placeholder="管理员帐号"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="queryData.email"
                placeholder="管理员邮箱"
                style="width: 200px; margin-right: 20px"
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryData.status" placeholder="开始">
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="searchList"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                @click="resetList"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button
            type="primary"
            plain
            @click="openDialog()"
          >创建用户</el-button>
        </div>
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="id" width="80px" label="管理员ID" />
        <el-table-column prop="username" width="117px" label="管理员姓名" />
        <el-table-column prop="phone" width="117px" label="手机号" />
        <el-table-column prop="email" width="117px" label="管理员邮箱" />
        <el-table-column label="管理员头像" align="center" width="117px">
          <template #default="{ row }">
            <el-avatar v-if="row.avatar" :size="50" shape="circle">
              <img :src="`http://124.223.14.236:7005/${row.avatar}`" alt="">
            </el-avatar>
            <el-avatar
              v-else
              :size="60"
              src="https://empty"
              @error="errorHandler"
            >
              <img
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              >
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="role_name_str"
          label="管理员角色"
          align="center"
          width="120px"
        >
          <template />
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="添加时间"
          width="200px"
          align="center"
        />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="2"
              @change="changeData(row.id, row.status)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="openDialog(row.id)"
            />
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="delListData(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div>
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="queryData.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <!-- 弹出层 Createuser -->
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        @close="handleClose"
      >
        <el-form
          ref="longRef"
          style="width: 206px"
          :model="longModel"
          :rules="longRules"
        >
          <el-form-item label="管理员名称" prop="username">
            <el-input v-model="longModel.username" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="管理员邮箱" prop="email">
            <el-input v-model="longModel.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="管理员密码" prop="password">
            <el-input v-model="longModel.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="管理员手机号" prop="phone">
            <el-input v-model="longModel.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="管理员状态">
            <el-switch
              v-model="longModel.status"
              active-text="启用"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
          <el-form-item size="small" label="管理员头像">
            <el-upload
              class="upload-demo"
              action="http://124.223.14.236:7005/admin/index/upload?mode=base64&type=image"
              :headers="obj"
              :file-list="fileList"
              list-type="picture"
              show-file-list
              :on-success="getImg"
              :on-remove="handleRemove"
              :before-upload="beforUplode"
            >
              <el-button
                type="success"
                icon="el-icon-upload"
              >选择上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="管理员角色">
            <el-checkbox-group v-model="longModel.roleid_list" :max="3">
              <el-checkbox
                v-for="item in roleList"
                :key="item.id"
                :label="item.id"
              >{{ item.role_name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  exprotList,
  delList,
  newcompileList,
  changeOption,
  getrole,
  addUser,
  getUserDetail,
  updataUser
} from '@/api/permission/user'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      fileList: [],
      obj: {},
      roleList: [],
      valueboll: true,
      flag: true,
      dialogVisible: false,
      value: '',
      list: [],
      queryData: {
        username: '',
        email: '',
        page: 1,
        limit: 10,
        status: null
      },
      total: 0,
      checked: true,
      longModel: {
        roleid_list: [],
        username: '',
        email: '',
        password: '',
        phone: '',
        status: 1,
        avatar: ''
      },
      longRules: {
        username: [
          { required: true, message: '管理员名称必须填写！', trigger: 'blur' },
          { min: 4, max: 8, message: '只能输入4~6位的名称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '管理员邮箱必须填写！', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请添加管理员密码!', trigger: 'blur' },
          { min: 6, max: 12, message: '请输入6~12位的手机号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请添加管理员手机号!', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.longModel.id ? '编辑管理员' : '添加管理员'
    }
  },

  async created() {
    const token = getToken()
    this.obj = { Authorization: token }
    const res = await getrole()
    console.log(res)
    this.roleList = res.data.list
    this.initdata()
  },
  methods: {
    async openDialog(id) {
      if (id) {
        const res = await getUserDetail(id)
        console.log(res)
        this.longModel = res.data
        this.fileList = [
          { url: `http://124.223.14.236:7005/${this.longModel.avatar}` }
        ]
      }
      this.dialogVisible = true
    },
    beforUplode(file) {
      console.log(file, 'flie')
    },
    handleRemove(file, fileList) {
      console.log(file)
      console.log(fileList)
      this.longModel.avatar = ''
    },
    getImg(response, file, fileList) {
      console.log(response)
      // console.log(file)
      // console.log(fileList)
      // console.log(response.data.savePath)
      this.longModel.avatar = response.data.url
    },
    async submit() {
      if (this.longModel.id) {
        await updataUser(this.longModel)
      } else {
        await addUser(this.longModel)
      }
      this.handleClose()
      this.initdata()
    },
    handleClose() {
      this.longModel = {
        username: '',
        email: '',
        password: '',
        phone: '',
        roleid_list: [],
        avatar: ''
      }
      this.fileList = []
      this.dialogVisible = false
    },
    async initdata() {
      const res = await exprotList(this.queryData)
      console.log(res)
      this.list = res.data.list
      this.total = res.data.total
    },
    errorHandler() {
      return true
    },
    // 搜索
    searchList() {
      this.queryData.page = 1
      this.initdata()
    },
    // 重置
    resetList() {
      this.queryData = {
        username: '',
        email: '',
        page: 1,
        limit: 10,
        status: null
      }
      this.initdata()
    },
    // 分页器
    handleSizeChange(val) {
      this.queryData.page = 1
      this.queryData.limit = val
      this.initdata()
    },
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initdata()
    },
    // 删除
    async delListData(id) {
      await delList(id)
      this.$message.success('删除成功')
      if (this.list.length <= 1 && this.queryData.page !== 1) {
        this.queryData.page -= 1
      }
      this.initdata()
    },
    // 数据回显

    // 编辑
    async compileList(id) {
      const res = await newcompileList(id)
      console.log(res, '编辑')
      this.queryData = res
      this.dialogVisible = true
    },

    // 状态的开关
    async changeData(zero, status) {
      const res = await changeOption({
        id: zero,
        hidden: status
      })
      this.$message.success('切换成功')
      // if (this.queryData.status === 1) {
      //   this.$message.success('已切换成启用')
      // } else {
      //   this.$message.success('已切换成禁用')
      // }
      console.log(res, '获取状态的开关')

      // this.initdata()
    }
  }
}
</script>

<style lang="scss" scoped>
.page-box {
  padding: 20px;
  .tabbar-box {
    padding-top: 10px;
    // border:  1px solid #eee;
    margin-bottom: 20px;
    height: 50px;
  }
}
</style>
